<template>
	<div id="dialog">
		<div class="border">
			<div @click="closeDialog" class="closeImg"></div>
			<image :src="imageurl" class="ew-image" />
		
		</div>
	</div>
</template>
<script>
	export default {
	     props: ["imageurl", "visible"],
		data() {
			return {}
		},
		methods: {
			closeDialog() {
				//给父组件传参
				this.$emit('close');
			}
		}
	}
</script>

<style scoped>
	#dialog {
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.3);
		width: 380px;
		height: 420px;
	}
	.closeImg {
		width: 20px;
		height: 20px;
		float: right;
		margin-right: 5px;
		margin-top: 5px;
		cursor: pointer;
		background-image: url(../../static/ic_close.png);
		background-size: cover;
		background-repeat: no-repeat;
	}

	.ew-image {
		width: 300px;
		height: 300px;
		margin: 20px;
	}
	.border {
		text-align: center;
		background-color: white;
		border-radius: 20px;
		width: 50%;
		height: 50%;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
